<template>
  <div>
    <van-nav-bar :title="`充值`"
                 :fixed=true
                 :border=false
                 @click-left="onClickLeft"
                 left-arrow
                 style="height:2.5rem;color: #FFFFFF" />
    <van-cell :border="false"></van-cell>
    <van-cell :border="false"></van-cell>
    <van-cell :border="false"></van-cell>

<!--    <van-row type="flex" justify="center">-->
<!--      <van-col span="12">-->
<!--        <div style="font-size: 20px">-->
<!--          钱包余额：{{$store.state.user.accountInfo.balance}}￥-->
<!--        </div>-->

<!--      </van-col>-->

<!--    </van-row>-->
    <van-cell :border="false"></van-cell>
    <van-cell :border="false"></van-cell>
    <van-cell :border="false"></van-cell>
    <van-row type="flex" justify="center">
      <van-col span="20">
        <van-form @submit="onSubmit">
          <van-field
              size="large"
              v-model="money"
              name="balance"
              type="number"
              placeholder="充值金额"
              input-align="center"
              :rules="[{ validator,required: true, message: errMsg}]"
          />
          <van-grid :column-num="3" gutter="5" clickable>
            <van-grid-item @click="setMoney(10)"  text="10元" />
            <van-grid-item @click="setMoney(32)"  text="32元" />
            <van-grid-item @click="setMoney(68)"  text="68元" />
            <van-grid-item @click="setMoney(128)"  text="128元" />
            <van-grid-item @click="setMoney(368)"  text="368元" />
            <van-grid-item @click="setMoney(648)"  text="648元" />
          </van-grid>
          <div style="margin: 16px;">
            <van-button round block type="info" native-type="submit">充值</van-button>
          </div>
        </van-form>
      </van-col>
    </van-row>
  </div>
</template>

<script>
import {getJwtToken} from "@/lib/utils/TokenUtil";
import store from "@/store";
import {addBalance} from "@/api/system";

export default {
  name: "Recharge",
  beforeRouteEnter (to,from,next) {
    if (getJwtToken()!==''){
      if (store.state.user.isGetInfo){
        next(vm =>vm.setUserInfo(store.state.user.info))
      }else {
        console.log('Mine:beforeRouteEnter:GetUserInfo')
        store.dispatch('GetUserInfo').then(res=>{
          next(vm =>vm.setUserInfo(res.data))
        })
      }
    }else{
      next()
    }
  },
  data(){
    return{
      money:undefined,
      userInfo:{},
      accountInfo:{},
      errMsg:''
    }
  },
  methods:{
    validator(val){
      if (val<1){
        this.errMsg = '充值金额必须大于一元'
        return false;
      }else if (val>50000){
        this.errMsg = '单次充值金额不允许大于5万元'
        return false;
      }else {
        return true
      }
    },
    setMoney(val){
      this.money = val
    },
    setUserInfo(data){
      this.accountInfo = store.state.user.accountInfo
      this.userInfo = data
    },
    onSubmit(values) {
      values['accountId'] = this.accountInfo.accountId
      console.log('submit', values);
      addBalance(values)
          .then(res=>{
            store.commit('setIsGetInfo')
            // store.dispatch('GetUserInfo').then(()=>{
              this.$toast.success({message:res.data})
            // })
          })

    },
    onClickLeft () {
      this.$router.back();
    }
  }
}
</script>

<style scoped>

</style>
